/**
 * 派车单模块 - 添加和编辑弹窗
 * @author xiaoxujs
 */

import { DatePicker, Form, Input, InputNumber, message, Modal, Select } from "antd";
import { FC, useEffect, useState } from "react";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";
import { ITlplTPlanAddForm } from "../../../../../type/WaybillManagement/form";
import { postTlplTPlanAdd } from "../../../api";
import { ITlplTPlanAddParams } from "../../../../../type/WaybillManagement/api";
import dayjs from "dayjs";
import { handleGetDictionaryItem } from "../../../../../assets/fun/DictionaryItem";
import { ISelectList } from "../../../../../type/antd";

const { RangePicker } = DatePicker;

const AddAndChangeModule: FC<{
  open: boolean,
  handleAddModuleCallback: () => void;
}> = ({
  open,
  handleAddModuleCallback
}) => {
    const [form] = Form.useForm<ITlplTPlanAddForm>();
    const { validateFields, resetFields } = form;
    const [confirmLoading, setConfirmLoading] = useState(false);

    const [listData, setListData] = useState<ISelectList[]>([])

    useEffect(() => {
      let arr = handleGetDictionaryItem('HP');
      let newArr: ISelectList[] = []
      arr.forEach(element => {
        newArr.push({
              value: element.label,
              label: element.label
          })
      });
      setListData(newArr);
    }, [])


    const handleOk = async () => {
      let values = await validateFields();
      setConfirmLoading(true)
      if (values.date) {
        const params: ITlplTPlanAddParams = {
          consignee: values.consignee,
          product: values.product,
          startDate: dayjs(values.date[0]).format('YYYY-MM-DD'),
          endDate: dayjs(values.date[1]).format('YYYY-MM-DD'),
          gross: values.gross,
        }
        const { code, msg } = await postTlplTPlanAdd(params) as { code: number; msg: string };
        if (code === 20000) {
          message.success('添加成功')
          handleCancel()
        } else {
          message.error(msg);
        }
      }

      setConfirmLoading(false)
    };

    const handleCancel = () => {
      setConfirmLoading(false)
      resetFields()
      handleAddModuleCallback();
    };
    return <Modal
      width={useWindowFontSize(488)}
      title='添加运单'
      open={open}
      onOk={handleOk}
      onCancel={handleCancel}
      confirmLoading={confirmLoading}
    >
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        form={form}
      >
        <Form.Item<ITlplTPlanAddForm>
          label="收货单位"
          name="consignee"
          rules={[{ required: true, message: '请输入' }]}
        >
          <Input placeholder="请输入收货单位名称" />
        </Form.Item>
        <Form.Item<ITlplTPlanAddForm>
          label="货品"
          name="product"
          rules={[{ required: true, message: '请选择!' }]}
        >
          <Select
            placeholder="请选择车道编号"
            style={{ width: 169 }}
            options={listData}
          />
        </Form.Item>
        <Form.Item<ITlplTPlanAddForm>
          label="总发货量(吨)"
          name="gross"
          rules={[{ required: true, message: '请输入' }]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item<ITlplTPlanAddForm>
          label="装运周期"
          name="date"
          rules={[{ required: true, message: '请选择' }]}
        >
          <RangePicker />
        </Form.Item>

      </Form>
    </Modal>
  }

export default AddAndChangeModule;